<template>
    <div class="login">
        <div class="header">
            <div class="header-left iconfont" @click="goback">&#xe780;</div>
            <div class="header-center">登录</div>
        </div>
        <div class="user">
            <div class="title">
               <h2>锦曼JinMan</h2>
                <h4>锦衣旗袍诗 曼玉花样时</h4> 
            </div>
            <div class="nam">
                <span class="iconfont">&#xe758;</span>
                <p><input type="text" placeholder="请输入用户名"></p>
            </div>
            <div class="pwd">
                <span class="iconfont">&#xe60d;</span>
                <p><input type="password" placeholder="请输入密码"></p>
            </div> 
            <div class="tab">
                <p>登录</p>
                <p><span @click="goregister">手机快速注册</span><span>忘记密码？</span></p>
            </div>
        </div>
    </div>
</template>


<script>
export default {
    methods:{
        goback(){
            this.$router.go(-1)
        },
        goregister(){
            this.$router.push('/register')
        }
    }
}
</script>


<style scoped>
.login{
    background: antiquewhite;
}
.header{ 
    width: 100%;
    display:flex;
    background:  #591514;
    height: 2.5rem;
    color: #f6e0c2;
    font-size: .7rem;
    position:fixed;
    top: 0;
    left: 0;
    z-index: 555;
}
.header .header-center{
    flex:1;
    line-height: 1.5rem;
    margin: auto;
    text-align: center;
}
.header-center span{
    float: right;
    margin-right:3%;
    font-size: 1rem; 
}
.header-left{
    margin:0 3%;
    line-height: 2.5rem;      
}
.user{
    margin-top: 2.5rem;
    text-align: center;
    color: #591514;
    overflow: hidden;
}
.title{
    margin: 20% 0;
}
.user h2,.user h4{
    font-weight: bold;
    line-height: 1.5rem;
}
.nam,.pwd{
    position: relative;
}
.nam input,.pwd input{
    width: 90%;
    height: 2rem;
    text-indent: 15%;
    background: none;
    border: 1px solid brown;
    border-radius:.4rem; 
    margin-bottom: 8%;
    font-size: 1rem;
}
.user .iconfont{
    font-size: 1.5rem;
    position: absolute;
    left: 8%;
    top:8px;
}
.tab p:nth-child(1){
    color: #fff;
    background: #591514;
    width: 90%;
    font-size: 1.2rem;
    line-height: 2rem;
    border-radius: .4rem;
    margin-left:5%; 
}
.tab p:nth-child(2){
    display: flex;
    width: 90%;
    margin-left:5%; 
    margin-top:10%; 
    justify-content: space-between;
    font-weight: bold;
    padding: 0 10px;
    box-sizing: border-box;
}
</style>
